<template>
    <div class="login">
        <div class="title">
            港区自然资源禀赋能源化评估软件
        </div>
        <img class="bg1" src="@/assets/login/login-bg1.png" alt="">
        <img class="bg2" src="@/assets/login/login-bg2.png" alt="">
        <img class="school-name" src="@/assets/login/school-name.png" alt="">
        <div class="box">
            <!-- 登录 -->
            <div class="box1 login-box flex-col flex-al-center" v-show="showLogin == 0">
                <div class="label">用户登录</div>
                <div class="user input-box flex">
                    <img src="@/assets/login/user.png" alt="">
                    <input placeholder="用户名" auto-complete="off" autocomplete="off" name="bb" maxlength="16" type="text" v-model="userName" >
                </div>
                <div class="psw input-box flex ">
                    <img src="@/assets/login/psw.png" alt="">
                    <input placeholder="密码" maxlength="16" autocomplete="new-password" name="cc" auto-complete="off" type="password" @keyup.enter="login" v-model="password">
                </div>
                <div class="pws-tools flex_bet">
                    <div class="rem-password flex-al-center">
                        <img v-show="!remember" class="pointer" style="width:18px" src="@/assets/login/no-rem.png"
                            @click="remember = true" alt="">
                        <img v-show="remember" class="pointer" src="@/assets/login/remember.png" @click="remember = false"
                            alt="">
                        记住密码
                    </div>
                    <div class="change-password pointer" @click="showLogin = 2">修改密码</div>
                </div>

                <div class="btn pointer" @click="login">
                    登录
                </div>

                <div class="forgot-password pointer" @click="showLogin = 1">忘记密码?</div>
            </div>

            <!-- 忘记密码 -->
            <div class="box2 login-box flex-col flex-al-center" v-show="showLogin == 1">
                <div class="label">忘记密码</div>
                <div class="word word1">请联系管理员</div>
                <div class="word word2">134 4567 7890</div>
                <div class="btn pointer" @click="showLogin = 0">
                    返回登录
                </div>
            </div>

            <!-- 修改密码 -->
            <div class="box1 login-box flex-col flex-al-center" v-show="showLogin == 2">

                <div class="label">
                    <div class="back">
                        <i class="el-icon-back pointer" @click="showLogin = 0"></i>
                    </div>修改密码
                </div>
                <div>
                    <div class="input-label">旧密码</div>
                    <div class=" input-box">
                        <input placeholder="请输入旧密码" maxlength="16" type="password" v-model="oldPsw">
                    </div>
                </div>
                <div style="margin:25px 0 0 0">
                    <div class="input-label">新密码</div>
                    <div class=" input-box">
                        <input placeholder="请输入新密码" maxlength="16" type="password" v-model="newPsw">
                    </div>
                </div>


                <div class="btn pointer" @click="submitChange">
                    确认修改
                </div>
            </div>
        </div>


    </div>
</template>

<script>
const Base64 = require("js-base64").Base64;
export default {
    data() {
        return {
            password: "",
            userName: "",
            remember: false,
            showLogin: 0,
            oldPsw: "",
            newPsw: "",
        }
    },
    created() {
        if (localStorage.getItem("password")) {
            this.password = Base64.decode(localStorage.getItem("password"));
            this.userName = localStorage.getItem("userName");
        }
        localStorage.getItem("remember") == "1"
            ? (this.remember = true)
            : (this.remember = false);
    },
    methods: {
        // 登录
        login() {
            if (!this.userName) {
                this.$message.warning("请输入用户名")
                return
            }
            if (!this.password) {
                this.$message.warning("请输入密码")
                return
            }
            let data = {
                // 请求参数
                account: this.userName,
                password: this.password
            }

            this.$api.login(data).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    if (this.remember) {
                        let password = Base64.encode(this.password); // base64加密
                        localStorage.setItem("userName", this.userName);
                        localStorage.setItem("password", password);
                        localStorage.setItem("remember", 1);
                    } else {
                        localStorage.removeItem("remember");
                        localStorage.removeItem("userName");
                        localStorage.removeItem("password");
                    }
                    this.$store.commit("Login", res.token)
                    this.$router.replace("/")
                } else {
                    this.$message.error(res.msg)
                }
            })

        },

        // 修改密码
        submitChange() {
            if (!this.userName) {
                this.$message.error("请先输入用户名")
                return
            }
            if (!this.oldPsw) {
                this.$message.error("请输入旧密码")
                return
            }
            if (!this.newPsw) {
                this.$message.error("请输入新密码")
                return
            }
            let data = {
                account: this.userName,
                password: this.oldPsw,
                newPassword: this.newPsw
            }
            this.$api.changePsw(data).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg)
                    this.showLogin = 0
                }
            })

        }
    }
}
</script>

<style lang="scss" scoped>
.login {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg, #032893 0%, #010F40 100%);

    .title {
        // position: absolute;
        padding: 69px 0 0 85px;
        font-size: 29px;
    }

    .bg1 {
        position: absolute;
        z-index: 2;
        left: 321px;
        top: 205px;
    }

    .bg2 {
        z-index: 1;
        // height: 325px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .school-name {
        position: absolute;
        z-index: 3;
        bottom: 64px;
        right: 75px;
    }

    .login-box {
        padding: 43px 52px;
        // width: 533px;
        height: 533px;
        box-sizing: border-box;
        position: absolute;
        z-index: 4;
        top: 220px;
        right: 360px;
        background-color: #00319E;
        background: url(@/assets/login/login-box.png) no-repeat;
        background-size: cover;

        .label {
            margin: 0 0 41px 0;
            font-size: 37px;
            color: #E9EBF1;
            position: relative;

            .back {
                position: absolute;
                color: #1977F0;
                left: -120px;
            }

        }

        .password {
            margin: 32px 0 16px;
        }
        .psw{
            margin: 20px;
        }
        .input-box {
            padding: 12px 20px;
            background: #193079;
            border-radius: 5px 5px 5px 5px;

            img {
                margin: 0 19px 0 0;
            }

            input {
                height: 37px;
                font-size: 27px;
                color: #7BB5FE;
                border: none;
                background: #193079;
            }

            input::placeholder {
                color: #7BB5FE;
            }
        }

        .pws-tools {
            width: 427px;
            font-size: 19px;

            .rem-password {
                img {
                    margin: 0 8px 0 0;
                }
            }

            .change-password {
                color: #28CDF6;
            }
        }

        .btn {
            margin: 53px 0 14px;
            width: 428px;
            padding: 9px 0;
            border-radius: 5px 5px 5px 5px;
            font-size: 32px;
            color: #FFFFFF;
            background: linear-gradient(180deg, #1977F0 0%, #193079 100%, #00319E 100%);
            text-align: center;

        }

        .forgot-password {
            font-size: 19px;
            color: #28CDF6;
        }

        .word {
            font-size: 27px;
            color: #E9EBF1;
        }

        .word1 {
            margin: 39px 0 0 0;
        }

        .word2 {
            margin: 21px 0 81px;
        }

        .input-label {
            height: 27px;
            font-size: 19px;
            color: #28CDF6;
        }
    }
}
</style>
  